<template>
  <div class="shop-box">
    <ul>
      <router-link :to="'/shopChild'+val.id" tag="li" v-for="val in shopTxt" :key="val.id">
        <img :src="val.img_url" alt class="url-img">
        <div class="shop-div">
          <h4>{{val.title}}</h4>
          <div>
            <span>￥{{val.sell_price}}</span>
            <span>￥{{val.market_price}}</span>
          </div>
          <p>
            <span>热卖中</span>
            <span>剩余:{{val.stock_quantity}}件</span>
          </p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 1,
      shopTxt: []
    };
  },
  created() {
    this.getShop();
  },
  methods: {
    getShop() {
      this.$http.get("api/getgoods?pageindex" + this.index).then(res => {
        this.shopTxt = res.body.message;
      });
    }
  }
};
</script>
<style lang="less">
.shop-box {
  ul {
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 15px;

    li {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 49%;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      .url-img {
        width: 100%;
      }
      .shop-div {
        h4 {
          font-size: 15px;
          font-weight: 550;
        }
        padding: 0 4px;
        div {
          display: flex;
          justify-content: space-between;
          span:last-child {
            text-decoration: line-through;
          }
        }
        p {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>

